class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showmodal: !1,
            showfstmodal: !1,
            type: -1,
            clocknum: 15,
            playing: !0,
            showvideomodal: !1,
            showjiayanmodal: !1,
            showsharemodal: !1,
            showposter: !1,
            showshareguide: !1,
            clock:!1,
            piece: {
                one: '',
                two: "",
                three: '',
                four: ''
            }
        };
    }










    componentDidMount() {


        if (Constant.SWITCH_VCONSOLE) {
            console.log('VConsole');

            new VConsole();
        }
        let type = GetQueryString('type')

        function playBackgroundMusic() {
            //  makeLog('play');
            var bgMusic = document.getElementById('bgmusic');
            console.log(bgMusic, 'bgMusic---');
            bgMusic.play();
            this.setState({ playing: !0 })
        }
        document.addEventListener(
            'WeixinJSBridgeReady',
            function () {
                console.log('WeixinJSBridgeReady---');
                // makeLog('WeixinJSBridgeReady');
                playBackgroundMusic();

            },
            false
        );


        let myphone = localStorage.getItem('phone')
        if (myphone != null) {
            myphone = maskPhoneNumber(myphone)
            this.setState({ myphone })
        }

        if (type == 'null') {
            window.location.href = './main.html'
        } else {


            获取微信数据('detail' + type, res => {
                let { nonceStr, ts, sign } = res;
                console.log({ nonceStr, ts, sign });

                sign = sign.toLowerCase();
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

                    appId: 'wx1cc77e0cd1a2bc3a', // 必填，公众号的唯一标识

                    timestamp: ts, // 必填，生成签名的时间戳

                    nonceStr: nonceStr, // 必填，生成签名的随机串

                    signature: sign,// 必填，签名

                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表

                });

            })

            wx.ready(function () {

                // wx.onMenuShareAppMessage({
                //     success:res=>{
                //         alert('分享成功')
                //     },
                //     complete:res=>{
                //         alert('complete')
                //     }
                // })

                // 设置“分享给朋友”及“分享到QQ”的按钮点击后的分享内容
                wx.updateAppMessageShareData({
                    title: '十五的月亮十三缘', // 分享标题
                    desc: '参与拼图互动，赢国缘V3苏超联名小酒等好礼！', // 分享描述
                    link: 'https://techcherry.cn/guoyuanh5/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://techcherry.cn/guoyuanh5/src/share_img.png', // 分享图标
                    success: function () {
                        console.log('successupdateAppMessageShareData');
                        // 设置成功

                    }
                });
                // 设置“分享到朋友圈”及“分享到QQ空间”的按钮点击后的分享内容
                wx.updateTimelineShareData({
                    title: '十五的月亮十三缘', // 分享标题
                    desc: '参与拼图互动，赢国缘V3苏超联名小酒等好礼！', // 分享描述
                    link: 'https://techcherry.cn/guoyuanh5/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://techcherry.cn/guoyuanh5/src/share_img.png', // 分享图标
                    success: function () {
                        // 设置成功
                        console.log('successupdateAppMessageShareData');
                        // alert('分享成功')
                    }
                });
            });








            当前碎片(res => {
                let { data } = res
                if (data == null) data = {
                    one: '',
                    two: "",
                    three: '',
                    four: ''
                }
                this.setState({
                    piece: data, type
                })
                if (type == 1) {
                    //

                    if (data['one'] != 1) {
                        setTimeout(() => {
                            新建one(res => {
                                if (res.issuccess == 1) {
                                    // alert('恭喜获得碎片')
                                    this.setState({ showfstmodal: !0 })
                                    // window.location.href='./main.html'
                                }
                            })
                        }, 2500);



                    } else {
                        alert('今日已领过')
                    }

                }
                if (type == 2) {
                    //
                    if (data['two'] == 1) {
                        alert('今日已领过')
                    }

                }

            })
        }


        // setTimeout(() => {
        //     audio.muted=false;
        //     audio.play()
        // }, 1000);

        let video = document.getElementById('video')
        var timer;

        video.addEventListener('play', () => {


            // alert('开始播放')
            if (this.state.piece['two'] != 1) {

                let { clock, clocknum,paused } = this.state;
                if (!clock||paused) {
                    this.setState({ clock: !0,paused:!1 })
                     timer = setInterval(() => {
                        clocknum--
                        this.setState({ clocknum: clocknum > 9 ? clocknum : '0' + clocknum })
                        if (clocknum < 1) {
                            // clearInterval(timer)
                            // this.setState({ showvideomodal: !0, clock: !1 })
                                更新碎片(2, res => {
                                    if (res.issuccess == 1) {
                                        // alert('更新碎片2成功')
                                        //显示助威能量
                                        this.setState({ showvideomodal: !0, click: !1 })

                                    }
                                })
                                clearInterval(timer)
                        }
                    }, 1000);

                }
                // setTimeout(() => {

                // }, 15000);
            }

        })

         video.addEventListener('pause', () => {
            console.log('pause',timer);
            this.setState({paused:!0})
             clearInterval(timer)
            
         })

        // window.location.href='https://shop41968497.m.youzan.com/wscshop/showcase/feature?alias=860wN4i4Vr&reft=1715156247752_1725441691494&spm=f.136299239_f.136295221&sf=wx_sm&is_share=1&shopAutoEnter=1&share_cmpt=native_wechat&from_uuid=22410934077&is_info_changed=1&is_silence_auth=1'
        // console.log(navigator.userAgent,'userAgent')
        //     let userid =  localStorage.getItem('userid1')  
        //     let token =  localStorage.getItem('token') 
        //     console.log(userid=!null,'bddd');

        //    if(userid=!null&&token!=null){
        //     window.location.href = './main.html'
        //    }


        //         new VConsole()
        //         let code = GetQueryString('code');
        //         if(code=='null'){
        //   let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd8d76eb5ff993f57&redirect_uri=http://chuanxingcloud.com/h5dish/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        //           //  window.location.href=url
        //         }else{
        //             console.log(code,'codecode');
        //             wxlogin(code,res=>{
        //                 console.log('wxlogin',res);
        //                 localStorage.setItem('openid',res.data.openid)
        //             })
        //         }
    }

    playmusic() {
        var bgMusic = document.getElementById('bgmusic'), { playing } = this.state
        if (playing) {
            bgMusic.pause()
        } else {
            bgMusic.play();
        }
        this.setState({ playing: !playing })
    }

    inputchange(e) {
        this.setState({ phone: e.target.value })

    }
    cbchange(e) {
        //console.log('cbchange', e.target.checked);
        this.setState({ isagree: e.target.checked })
    }

    toxieyi(e) {
        window.location.href = './xieyi.html?t=' + e
    }

    submit() {
        if (!this.state.isagree) {
            alert('请先勾选同意协议')
        } else {
            let { phone } = this.state, err = ''
            if (phone.length != 11) { err = '手机号输入有误' }
            if (err != '') {
                alert(err)
            } else {
                bind(phone, res => {
                    console.log(res, 'resres--bind');

                    if (res.issuccess == 1) {
                        localStorage.setItem('userid', res.userid)
                        localStorage.setItem('token', res.token)
                        window.location.href = './main.html'
                    } else {
                        alert(res.msg)
                    }
                })

            }

        }
    }

    get3() {
        let { piece } = this.state
        this.setState({ showshareguide: !1 })
        if (piece.three != 1) {
            更新碎片(3, res => {
                if (res.issuccess == 1) {
                    //获取到第三块
                    this.setState({ showsharemodal: !0, })
                } else {
                    alert(res.msg)
                }
            })
        } else {
            alert('今日已领过')
        }
    }







    addimg() {
        let { piece } = this.state
        console.log(piece, 'piece');

        if (piece.four == 1) {
            alert('今日已领过')
        } else {
            $('#fileimgsrc').click()
        }
    }

    // filechangeimg(e) {
    //     var that = this, { img } = this.state;
    //     var filedata = $('#fileimgsrc')[0].files[0];
    //     console.log(filedata, 'filedata');
    //     let _name, _fileName, filedatasize = 1024 * 5;

    //     _name = $('#fileimgsrc')[0].value;
    //     _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
    //     if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
    //         alert("上传图片格式不正确，请重新上传");
    //     } else {
    //         if (filedatasize < filedata.size / 1024) {
    //             console.log(filedata.size / 1024,'ffffsize');
    //             alert("上传图片不能大于3M");
    //             return;
    //         }else{
    //         // let filee = e
    //         var reader = new FileReader();
    //         reader.readAsDataURL(filedata);
    //         reader.onload = function (e) {
    //             var base64str = e.target.result;
    //             console.log('base64str', base64str);

    //             uploadimg(base64str, res => {
    //                 console.log(res, 'res--upload');
    //                 if (res.issuccess == 1) {
    //                     更新碎片4(res.path, res1 => {
    //                         console.log(res1, 'res1更新碎片4');
    //                         if (res1.issuccess == 1) {
    //                           //  alert('恭喜获得拼图'
    //                           that.setState({showjiayanmodal:!0})
    //                            // window.location.href = './main.html'
    //                         } else {
    //                             alert(res1.msg)
    //                         }

    //                     })

    //                 }else{
    //                     alert(res.msg)
    //                 }

    //             })
    //             //  img.push(base64str)
    //             // if (img[0] == '') {
    //             //     img[0] = base64str
    //             // } else {
    //             //     img[1] = base64str
    //             // }
    //             that.setState({ base64str })
    //             //  that.putswiperimglistdata([base64str], filee)
    //         }

    //     }
    //     }
    // }


    filechangeimg(e) {
        var that = this, { img } = this.state;
        var filedata = $('#fileimgsrc')[0].files[0];
        console.log(filedata, 'filedata');
        let _name, _fileName, filedatasize = 1024 * 5;

        _name = $('#fileimgsrc')[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {

            console.log(filedata.size / 1024, 'ffffsize');
            if (filedatasize < filedata.size / 1024) {

                alert("上传图片不能大于5M");
                return;
            } else {
                uploadimg1(filedata, res => {
                    if (res.issuccess == 1) {
                        更新碎片4(res.path, res1 => {
                            if (res1.issuccess == 1) {
                                //  alert('恭喜获得拼图'
                                that.setState({ showposter: !0 })
                                // window.location.href = './main.html'
                            } else {
                                alert(res1.msg)
                            }
                        })
                    } else {
                        alert('上传失败')
                    }
                })
            }
        }
    }









    render() {
        let { myphone, type, phone,showposter, playing, showjiayanmodal, clock, clocknum, showshareguide, showfstmodal, showvideomodal, showsharemodal } = this.state;
        return (
            <div className="app">

                <audio preload="auto" src="music.mp3" loop id="bgmusic" >
                </audio>
                <img onClick={this.playmusic.bind(this)} className={"musicicon " + (playing ? 'zhuan' : '')} src="./src/music.png" alt="" />


                <div className="myinfo">您好.{myphone}</div>
                <input onChange={this.filechangeimg.bind(this)} type='file' id='fileimgsrc' style={{ display: "none" }} />
                <img loading="lazy" className="bg" src="./src/detail_bg.png" alt="" />
                <div style={{ display: type == 1 ? '' : 'none' }}>


                    <img loading="lazy" style={{ display: showfstmodal ? 'none' : '' }} className="detail1" src="./src/detail1.png" alt="" />
                    <div style={{ display: showfstmodal ? 'none' : '' }} className="btns">
                        <img onClick={() => {
                            window.location.href = './main.html'

                        }} className="back" src="./src/back_btn.png" alt="" />
                    </div>

                    <div onClick={() => {
                        window.location.href = './main.html'
                    }} style={{ display: showfstmodal ? '' : 'none' }} className="fstmodal">
                        <img onClick={() => {
                            window.location.href = './main.html'
                        }} src="./src/close.png" className="close" alt="" />
                    </div>




                </div>
                <div style={{ display: type == 2 ? '' : 'none' }}>


                    <div style={{ display: showvideomodal ? 'none' : '' }} className="videobg">

                        <div style={{ display: clock ? '' : 'none' }} className="clock">
                            <p className={clock ? 'hb' : ''}>{clocknum}</p>
                        </div>

                        <video id='video' controls>
                            <source src="http://techcherry.cn/guoyuanh5/src/test.mp4" type="video/mp4" />
                        </video>
                    </div>

                    <div style={{ display: showvideomodal ? 'none' : '' }} className="btns">
                        <img onClick={() => {
                            $('#video')[0].play()
                        }} className="back" src="./src/btn_video.png" alt="" />
                        <img onClick={() => {
                            window.location.href = './main.html'
                        }} className="back" src="./src/back_btn1.png" alt="" />
                    </div>

                    <div onClick={() => {
                            window.location.href = './main.html'
                        }}  style={{ display: showvideomodal ? '' : 'none' }} className="videomodal">
                        {/* <img onClick={() => {
                            window.location.href = './main.html'
                        }} src="./src/jixubtn.png" className="back" alt="" /> */}

                        {/* <img onClick={() => {
                            window.location.href = './main.html'
                        }} src="./src/close.png" className="close" alt="" /> */}
                    </div>

                </div>

                <div style={{ display: type == 3 ? '' : 'none' }}>

                    <img loading="lazy" style={{ display: showshareguide ? '' : 'none' }} onClick={this.get3.bind(this)}  src="./src/share_bgbg.png" className="sharebgbg" alt="" />

                    <img  onClick={this.get3.bind(this)} style={{ display: showshareguide ? '' : 'none' }} src="./src/close.png" className="close three" alt="" />
                    {/* <img className="detail1" src="./src/share_bg.png" alt="" /> */}
                    <div style={{ display: showsharemodal ? 'none' : '' }} className="sharebg">
                        {/* <img src="./src/qrcode.png" className="qrcode" alt="" /> */}
                    </div>

                    <div style={{ display: showsharemodal ? 'none' : '' }} className="btns">

                        <img onClick={() => {
                            this.setState({ showshareguide: !0 })
                        }} className="back heartbeat" src="./src/sharebtn.png" alt="" />



                        <img onClick={() => {
                            window.location.href = './main.html'
                        }} className="back" src="./src/back_btn1.png" alt="" />

                    </div>
                    <div onClick={() => {
                            window.location.href = './main.html'
                        }} style={{ display: showsharemodal ? '' : 'none' }} className="sharemodal">
                        {/* <img onClick={() => {
                            window.location.href = './main.html'
                        }} src="./src/jixubtn.png" className="back" alt="" /> */}



                        <img  src="./src/close.png" className="close" alt="" />
                    </div>
                </div>

                <div style={{ display: type == 4 ? '' : 'none' }}>

                            <div onClick={()=>{this.setState({showposter:!1,showjiayanmodal:!0})}}  style={{ display: showposter ? '' : 'none' }} className="postmodal">
                                <img className="poster" src="./src/poster.png" alt="" />
                                <img onClick={()=>{this.setState({showposter:!1,showjiayanmodal:!0})}} className="poster_jiantou" src="./src/share_jiantou.png" alt="" />
                                <div onClick={()=>{this.setState({showposter:!1,showjiayanmodal:!0})}} className="mask"></div>
                                <p onClick={()=>{this.setState({showposter:!1,showjiayanmodal:!0})}} className="poster_word">分享海报获得拼图</p>

                            </div>


                    <img loading="lazy" style={{ display: showjiayanmodal||showposter ? 'none' : '' }} onClick={this.addimg.bind(this)} className="jiayan" src="./src/jiayan.png" alt="" />

                    <div style={{ display: showjiayanmodal||showposter ? 'none' : '' }} className="btns">

                        <img onClick={this.addimg.bind(this)} className="back" src="./src/uploadbtn.png" alt="" />

                          <img onClick={() => {
                            window.location.href = './main.html'
                        }} className="back" src="./src/back_btn1.png" alt="" />

                        {/* <img onClick={() => {
                            window.location.href = './main.html'
                        }} className="back" src="./src/jixubtn.png" alt="" /> */}

                    </div>

                    <div onClick={() => {
                        window.location.href = './main.html'
                    }} style={{ display: showjiayanmodal ? '' : 'none' }} className="jiayanmodal">
                        <img onClick={() => {
                            window.location.href = './main.html'
                        }} src="./src/close.png" className="close" alt="" />
                    </div>





                </div>



            </div>


        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>

            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)